// 购物车逻辑实现

// 获取元素
const emptyBox = document.querySelector('.empty')
const cartBox = document.querySelector('.cart')

// 首先要获取 id 和 token 
const id = window.localStorage.getItem('id')
const token = window.localStorage.getItem('token')

// 设计一个函数
setLogin()
async function setLogin() {
    // 验证我们的token 和 id
    if (!id || !token) return window.location.href = './login.html'
    // 代码能执行到这里说明曾经登录过不能保证现在还是处于登录状态
    let res = await pAjax({
        url: 'http://localhost:8888/users/info',
        data: { id },
        headers: { 'authorization': token },
        datatype: 'json'

    })
    if (res.code !== 1) return window.location.href = './login.html'
    // 代码能执行到这里说名是真的处于登录状态
    // console.log(res);
    // 发送求获取购物车的数据
    getCartList()
}
async function getCartList() {

    // 发送请求
    let res = await pAjax({
        url: 'http://localhost:8888/cart/list',
        data: { id },
        headers: { 'authorization': token },
        datatype: 'json'
    })

    // 判断是否有商品加入购物车
    // 如果没有就是空的一个数组
    if (res.cart.length === 0) {
        emptyBox.classList.add('active')
        cartBox.classList.remove('active')
    } else {
        emptyBox.classList.remove('active')
        cartBox.classList.add('active')
        bindHtml(res.cart)
    }
    // console.log(res);
}

function bindHtml(list) {
    // 我们还需要一些统计性的数据
    let totalNum = 0, totalSelect = 0, totalPrice = 0
    list.forEach(function (item) {
        if (item.is_select) {
            totalNum += item.cart_number
            totalSelect++
            totalPrice += item.cart_number * item.current_price
        }
    })


    // 渲染我们的页面

    let str = `
            
        <div class="top">
            全选: <input class="selectAll" type="checkbox" ${list.length === totalSelect ? 'checked' : ''}>
        </div>
        <ul class="center">
          `
    list.forEach(function (item) {
        str += `
        <li>
            <div class="select">
                <input data-id="${item.goods_id}" type="checkbox" class="select_item" ${item.is_select ? 'checked' : ''}>
            </div>
            <div class="show">
                <img src="${item.img_small_logo}" alt="">
            </div>
            <div class="title">${item.title}</div>
            <div class="price">￥${item.current_price}</div>
            <div class="number">
                <button class="sub" data-id="${item.goods_id}">-</button>
                <input type="text" value="${item.cart_number}">
                <button class="add" data-id="${item.goods_id}">+</button>
            </div>
            <div class="subPrice">￥${(item.current_price * item.cart_number).toFixed(2)}</div>
            <div class="del">
                <button class="delBtn" data-id="${item.goods_id}">删除</button>
            </div>
        </li>
        
        `
    })

    str += `
        </ul>
        <div class="bottom">
            <p>共计${totalNum}件商品</p>
            <div>
                <button class="clear">清空购物车</button>
                <button class="delAll" ${totalSelect === 0 ? 'disabled' : ''}>删除所有已选中</button>
                <button class="pay" ${totalSelect === 0 ? 'disabled' : ''}>去支付</button>
            </div>
            <p>总价￥ ${totalPrice.toFixed(2)}</p>
        </div>
    
    `
    cartBox.innerHTML = str
}

// 通过事件委托的方式添加点击事件
cartBox.addEventListener('click', async e => {
    e = e || window.event
    let target = e.target || e.srcElement


    // 修改一条商品信息
    if (target.className === 'select_item') {
        // 获取到商品id
        let goodsId = target.dataset.id - 0
        // console.log(goodsId);
        // 发送请求
        let res = await pAjax({
            url: 'http://localhost:8888/cart/select',
            data: { id, goodsId },
            datatype: 'json',
            headers: { 'authorization': token },
            method: 'post'
        })

        if (res.code === 1) getCartList()
        // console.log(res);
    }
    // 删除商品
    if (target.className === 'delBtn') {
        // 获取到商品id
        let goodsId = target.dataset.id - 0
        // 发送请求
        let res = await pAjax({
            url: 'http://localhost:8888/cart/remove',
            data: { id, goodsId },
            datatype: 'json',
            headers: { 'authorization': token },
        })
        // console.log(res);
        if (res.code === 1) getCartList()
    }

    // 增加购买数量
    if (target.className === 'add') {
        // 获取到商品id
        let goodsId = target.dataset.id - 0
        // 首先要获取到现在有的商品的数量
        let n = target.previousElementSibling.value - 0
        // console.log(n);
        let res = await pAjax({
            url: 'http://localhost:8888/cart/number',
            data: { id, goodsId, number: n + 1 },
            datatype: 'json',
            headers: { 'authorization': token },
            method: 'post'
        })

        if (res.code === 1) getCartList()
        console.log(res);
    }

    // 减少购买数量
    if (target.className === 'sub') {
        // 获取到商品id
        let goodsId = target.dataset.id - 0
        // 首先要获取到现在有的商品的数量
        let n = target.nextElementSibling.value - 0
        if (n < 1) return
        // console.log(n);
        let res = await pAjax({
            url: 'http://localhost:8888/cart/number',
            data: { id, goodsId, number: n - 1 },
            datatype: 'json',
            headers: { 'authorization': token },
            method: 'post'
        })

        if (res.code === 1) getCartList()
        console.log(res);
    }

    // 全选
    if (target.className === 'selectAll') {
        // 获取 type
        let type = target.checked ? 1 : 0

        let res = await pAjax({
            url: 'http://localhost:8888/cart/select/all',
            data: { id, type },
            datatype: 'json',
            headers: { 'authorization': token },
            method: 'post'
        })
        // console.log(res);
        if (res.code === 1) getCartList()
    }

    // 清空购物车
    if (target.className === 'clear') {
        let res = await pAjax({
            url: 'http://localhost:8888/cart/clear',
            data: { id },
            datatype: 'json',
            headers: { 'authorization': token },
        })
        // console.log(res);
        if (res.code === 1) getCartList()
    }
    // 删除已选中
    if (target.className === 'delAll') {
        let res = await pAjax({
            url: 'http://localhost:8888/cart/remove/select',
            data: { id },
            datatype: 'json',
            headers: { 'authorization': token },
        })
        console.log(res);
        if (res.code === 1) getCartList()
    }
    // 去支付
    if (target.className === 'pay') {
        let res = await pAjax({
            url: 'http://localhost:8888/cart/pay',
            data: { id },
            datatype: 'json',
            headers: { 'authorization': token },
            method: 'post'
        })
        console.log(res);
        if (res.code === 1) getCartList()
    }
})
